<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" href="./css/zui.css">
    <link rel="stylesheet" href="./css/nav.css">
</head>
<body>
    <div class="header">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
              <!-- 导航头部 -->
              <div class="navbar-header">
                <!-- 移动设备上的导航切换按钮 -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-example">
                  <span class="sr-only">切换导航</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <!-- 品牌名称或logo -->
                <a class="navbar-brand" href="/">北游前端论坛</a>
              </div>
              <!-- 导航项目 -->
              <div class="collapse navbar-collapse navbar-collapse-example">
                <ul class="nav navbar-nav navbar-right">
                    <!-- <li><a href=""><i class="icon icon-plus"></i> 发表</a></li> -->
                    <li><a href="./regiest.html"><i class="icon icon-user"></i> 注册</a></li>
                    <!-- <li class="dropdown">
                      <a href="" class="dropdown-toggle" data-toggle="dropdown">探索 <b class="caret"></b></a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="">敏捷开发</a></li>
                        <li><a href="">HTML5</a></li>
                        <li><a href="">Javascript</a></li>
                        <li class="divider"></li>
                        <li><a href="">探索宇宙</a></li>
                      </ul>
                    </li> -->
                  </ul>
            </div>
          </nav>
    </div>
    <main>
        <div class="form-group">
            <label for="exampleInputAccount1">账号</label>
            <input type="text" class="form-control" id="username" placeholder="电子邮件/手机号/用户名">
          </div>
          <div class="form-group">
            <label for="exampleInputAccount1">密码</label>
            <input type="password" class="form-control" id="password" placeholder="请输入用户密码">
          </div>
         
          <button class="btn btn-block btn-success" type="button">登录</button>
    </main>
</body>
<script src="./js/jquery.js"></script>
<script src="./js/zui.js"></script>
<script>
    $(".btn-success").click(function(){
    let username =  $("#username").val();
     let password = $("#password").val();
     if(!username || !password){
      new $.zui.Messager("请您先补充完整信息", {
               type:"warning",
               icon: 'warning-sign',
               time:2000
            }).show(); 
        return
     };
    
     $.ajax({
       url:"/login",
       method:"post",
       data:{
         username,
         password
       },
       success:(res)=>{
         console.log(res)
         if(res.code == 0){
           window.location.href = '/'
         }else{
          new $.zui.Messager(res.msg, {
               type:"warning",
               icon: 'warning-sign',
               time:2000
            }).show(); 
         }
       }
     })
     
    })
</script>
</html>